<template>
  <div >

					<!-- 遍历商品列表 -->

					<div v-for="(item,index) in datalist" :key="index" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item?id='+item.id">
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="240" height="240">
							</a>
							<figcaption>
								<div class="thumb-overlay"><a :href="'http://localhost:8080/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
							
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>

			
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>
                    <br />
					<!-- heyui分页 -->
					<br />
					<!-- heyui分页 -->
					<div>

						<Pagination v-model="pagination" @change="change" ></Pagination>
						
					</div>
                   
					

					
				</div>
</template>

<script>
export default {
	data(){
		return{
			size:2,
      //分页器变量
      pagination:{
      	page:1,
      	size:4,
      	total:5
	  },
	  //商品列表
      datalist:[],
		}
	},
	mounted:function(){
		  this.axios.get('http://localhost:8000/goodslist/',{params:{page:1,size:4}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;

      });

	},
	methods:{
		change:function(){


  		//发送请求
      		this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;

      });

	  }

	}
  
    }
   

</script>

<style>

</style>